技術問答
技術文章
iT 徵才
Tag
聊天室
2024 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
第 11 屆 iThome 鐵人賽
DAY
27
1
自我挑戰組
CSS 大全(第四版)閱讀筆記
系列 第
27
篇
day27【主題六:選擇器】筆記2
11th鐵人賽
Amy
2019-09-28 09:22:37
595 瀏覽
分享至
一、選擇每間隔n個元素,:nth-child()
:nth-child(1) 相當於 :first-child
可使用an+b、an-b,兩種代數運算式
實務上常用於清除列圖文列表、面板清單的浮動,n等於一列要的個數 .class li:nth-child(3n+1){clear:left}
注意!n是從0開始,但是所有元素都是從1開始數
:nth-child(2n)表示所有偶數項子代元素(even)
:nth-child(2n+1)、:nth-child(2n-1)表示所有奇數項子代元素(odd)
:nth-last-child()是從兄弟元素列表的尾端往回數
兩個虛擬類別同樣也可以串接使用
使用nth-child時,會將子層中的所有標籤都會一起列號計算
二、每隔n的項目選擇相同類型元素,:nth-of-type()
:nth-of-type(1):nth-last-of-type(1)相當於:only-of-type,但有較高的權重
使用nth-of-type時,會只將子層中的特定選擇列號計算
三、第一個字母與第一行內容
第一個字母,::first-letter
第一行內容,::first-line
只適用於標題或斷落等區塊元素,不是超連結的行內顯示,能夠用的屬性也有所限制(p98)
留言
追蹤
檢舉
上一篇
day26【主題六:選擇器】筆記1
下一篇
day28【主題六:選擇器】筆記3-動態、介面狀態虛擬類別
系列文
CSS 大全(第四版)閱讀筆記
共
30
篇
目錄
RSS系列文
訂閱系列文
17
人訂閱
26
day26【主題六:選擇器】筆記1
27
day27【主題六:選擇器】筆記2
28
day28【主題六:選擇器】筆記3-動態、介面狀態虛擬類別
29
day29【主題七:邊界範圍】
30
day30【主題八:數值與單位】
完整目錄
直播研討會
{{ item.subject }}
{{ item.channelVendor }}
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
1064
組
團體組數
40
組
累計文章數
22211
篇
完賽人數
600
人
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
16th鐵人賽
13th鐵人賽
14th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
javascript
2018鐵人賽
python
2017鐵人賽
windows
php
c#
windows server
linux
css
react
vue.js
熱門問題
mail server 主機推薦
Outlook 2016 收不到外來信 已解決
windows11的複製功能出現問題
有關Chrome瀏覽器擴充功能,選定特別類型檔案封鎖上傳,並且三秒後關掉網頁
Chrome瀏覽器限制上傳檔案類型
SQL 如何將同欄位數據依照條件拆分成不同欄的資料
mongodb atlas 連線速度變慢或斷線
CTF GAME
同網段下無法連線到印表機
請問如何 移除 KB5051989 更新?造成一些bug
熱門回答
mail server 主機推薦
SQL 如何將同欄位數據依照條件拆分成不同欄的資料
windows11的複製功能出現問題
有關Chrome瀏覽器擴充功能,選定特別類型檔案封鎖上傳,並且三秒後關掉網頁
Outlook 2016 收不到外來信 已解決
熱門文章
「記憶體與基本儲存電路:Latch & Flip Flop」
從零開始學習Java筆記(基本語法)
調變與解調的基本概念(發射端 & 接收端)
請教台語語音模型 (STS, STT)
有關Chrome瀏覽器擴充功能,選定特別類型檔案封鎖上傳
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}